<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="80px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>
					<el-form-item label="商品名称" prop="commodityName">
						<el-input v-model="queryParams.commodityName" placeholder="请输入" clearable class="resetInput"
							style="width: 200px"/>
					</el-form-item>
					<el-form-item label="作物类型" prop="recommendedCrops">
						<el-select v-model="queryParams.recommendedCrops" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in cropNameArr" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="靶标" prop="recommendedTargets">
						<el-select v-model="queryParams.recommendedTargets" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_target" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品品牌" prop="brandName">
						<el-input v-model="queryParams.brandName" placeholder="请输入" clearable class="resetInput"
							style="width: 200px"/>
					</el-form-item>
					<el-form-item label="有效成分1" prop="activeIngredient1">
						<el-input v-model="queryParams.activeIngredient1" placeholder="请输入" clearable class="resetInput"
							style="width: 200px"/>
					</el-form-item>
					<el-form-item label="有效成分2" prop="activeIngredient2">
						<el-input v-model="queryParams.activeIngredient2" placeholder="请输入" clearable class="resetInput"
							style="width: 200px"/>
					</el-form-item>
					<el-form-item label="有效成分3" prop="activeIngredient3">
						<el-input v-model="queryParams.activeIngredient3" placeholder="请输入" clearable class="resetInput"
							style="width: 200px"/>
					</el-form-item>
					<el-form-item label="药剂类型" prop="dosageForm">
						<el-select v-model="queryParams.dosageForm" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_sosage_form" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
				</div>
				<el-form-item>
					<div class="flex col-center row-end" style="margin-right: 0">
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<span class="fb fs16">商品信息列表</span>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }">
				<el-table-column label="序号" align="center" width="50">
					<template #default="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>	
				<el-table-column label="商品名称" align="center" prop="commodityName" />
				<el-table-column label="商品品牌" align="center" prop="brandName"/>				
				<el-table-column label="作物类型" align="center" prop="recommendedCrops">
					<template v-slot="scope">
							<dict-tag :options="cropNameArr" :value="scope.row.recommendedCrops" />
					</template>
				</el-table-column>
				<el-table-column label="靶标" align="center" prop="recommendedTargets">
					<template v-slot="scope">
							<dict-tag :options="bus_target" :value="scope.row.recommendedTargets" />
					</template>
				</el-table-column>
				<el-table-column label="药剂类型" align="center" prop="dosageForm">
					<template v-slot="scope">
						<dict-tag :options="bus_sosage_form" :value="scope.row.dosageForm" />
					</template>
				</el-table-column>
				<el-table-column label="有效成分1" align="center" prop="activeIngredient1"/>
				<el-table-column label="有效成分2" align="center" prop="activeIngredient2"/>
				<el-table-column label="有效成分3" align="center" prop="activeIngredient3"/>
					
				<el-table-column fixed="right" label="操作" align="center" width="100">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleUpdate(scope.row)"
						>查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
								v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<operateGoods ref="goodsPop"></operateGoods>
	</div>
</template>

<script>
	import {
		quickQuery
	} from "@/api/business/tool";
	import {
		cropVariety,//获取作物
	} from "@/api/business/customer";
	import operateGoods from "@/views/business/goods/components/operateGoods.vue";
	export default {
		components:{
			operateGoods
		},
		data() {
			return {
				bus_target:this.useDict('bus_target').bus_target,//靶标
				bus_sosage_form:this.useDict('bus_sosage_form').bus_sosage_form,//药剂类型
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 产品表格数据
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					commodityName:'',//商品名称
					activeIngredient1:'',//有效成份1
					activeIngredient2:'',//有效成份2
					activeIngredient3:'',//有效成份3
					recommendedCrops:'',//推荐适用作物
					recommendedTargets:'',//推荐适用靶标
					dosageForm:'',//剂型
					brandName:'',//品牌名称
				}, //查询参数
				cropNameArr: [], //作物名称
			}
		},
		created() {
			this.cropVariety()
		},
		methods: {	
			// 获取作物列表
			cropVariety() {
				cropVariety().then(response => {
					this.cropNameArr = response.rows
					for(let key in this.cropNameArr){
						this.cropNameArr[key].value = this.cropNameArr[key].id
						this.cropNameArr[key].label = this.cropNameArr[key].cropName
					}
					this.getList()
				})
			},
			//查询列表
			getList() {
				this.loading = true;
				quickQuery(this.queryParams).then((response) => {
					this.list = response.rows;
					// for(let key in this.list){
					// 	this.list[key].status = this.list[key].status == '0' ? true : false
					// }
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					keyword: '', 
					salesChannel: '', // 销售渠道
				}
				this.handleQuery();
			},
			// 启用状态操作
			updateEnabled(row) {
				this.loading = true;
				let item = {
					id: row.id,
					status: row.status == true ? 0 : 1,
				}
				updatePackageStatus(item).then((response) => {
					this.$modal.msgSuccess("更新成功");
					this.loading = false;
					this.getList();
				});
			},
			// 编辑
			handleUpdate(row) {
				this.$refs.goodsPop.open(row.commodityId,1)
				// this.$router.push('/goods/goodsDetail?id='+row.commodityId)
			},
		}
	}
</script>